<template>
  <view class="distribute-info-modal" v-if="visible" @tap.stop>
    <view class="modal-overlay" @tap="handleClose"></view>
    <view class="modal-content">
      <!-- 标题栏 -->
      <view class="modal-header">
        <text class="modal-title">分发信息</text>
        <view class="close-btn" @tap="handleClose">
          <text class="close-icon">×</text>
        </view>
      </view>

      <!-- Tab切换 -->
      <view class="tabs-container">
        <view
          class="tab-item"
          :class="{ active: activeTab === 'external' }"
          @tap="activeTab = 'external'"
        >
          <text class="tab-icon">🏢</text>
          <text class="tab-text">外部单位 ({{ externalRecords.length }})</text>
        </view>
        <view
          class="tab-item"
          :class="{ active: activeTab === 'internal' }"
          @tap="activeTab = 'internal'"
        >
          <text class="tab-icon">👥</text>
          <text class="tab-text">内部部门 ({{ internalRecords.length }})</text>
        </view>
      </view>

      <!-- 内容区域 -->
      <scroll-view class="modal-body" scroll-y="true" :show-scrollbar="true">
        <!-- 外部单位分发记录 -->
        <view v-if="activeTab === 'external'">
          <view v-if="externalRecords.length > 0" class="records-list">
            <view class="record-item" v-for="record in externalRecords" :key="record.id">
              <view class="record-header">
                <text class="record-company">{{ record.companyName }}</text>
                <view class="status-badge" :class="{ viewed: record.viewStatus === 1 }">
                  <text class="status-text">{{
                    record.viewStatus === 1 ? '已查看' : '未查看'
                  }}</text>
                </view>
              </view>
              <view class="record-info">
                <view class="info-row">
                  <text class="info-label">查看人：</text>
                  <text class="info-value">{{ record.viewerName || '-' }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">角色：</text>
                  <text class="info-value">{{ record.viewerDeptName || '-' }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">查看时间：</text>
                  <text class="info-value">{{ formatDateTime(record.viewedAt) }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">分发时间：</text>
                  <text class="info-value">{{ formatDateTime(record.createdAt) }}</text>
                </view>
              </view>
            </view>
          </view>
          <view v-else class="empty-state">
            <text class="empty-icon">📭</text>
            <text class="empty-text">暂无外部单位分发记录</text>
          </view>
        </view>

        <!-- 内部部门分发记录 -->
        <view v-if="activeTab === 'internal'">
          <view v-if="internalRecords.length > 0" class="records-list">
            <view class="record-item" v-for="record in internalRecords" :key="record.id">
              <view class="record-header">
                <text class="record-company">{{ record.companyName }}</text>
                <view class="status-badge" :class="{ viewed: record.viewStatus === 1 }">
                  <text class="status-text">{{
                    record.viewStatus === 1 ? '已阅读' : '未阅读'
                  }}</text>
                </view>
              </view>
              <view class="record-info">
                <view class="info-row">
                  <text class="info-label">负责人：</text>
                  <text class="info-value">{{ record.viewerName || '-' }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">部门：</text>
                  <text class="info-value">{{ record.viewerDeptName || '-' }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">阅读时间：</text>
                  <text class="info-value">{{ formatDateTime(record.viewedAt) }}</text>
                </view>
                <view class="info-row">
                  <text class="info-label">分发时间：</text>
                  <text class="info-value">{{ formatDateTime(record.createdAt) }}</text>
                </view>
              </view>
            </view>
          </view>
          <view v-else class="empty-state">
            <text class="empty-icon">📭</text>
            <text class="empty-text">暂无内部部门分发记录</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface DistributeRecord {
  id: number
  companyName: string
  viewStatus: number
  viewerName?: string
  viewerDeptName?: string
  viewedAt?: string
  createdAt?: string
}

const props = defineProps<{
  visible: boolean
  externalRecords: DistributeRecord[]
  internalRecords: DistributeRecord[]
}>()

const emit = defineEmits<{
  'update:visible': [value: boolean]
  close: []
}>()

const activeTab = ref<'external' | 'internal'>('external')

const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

const formatDateTime = (dateTime: string | undefined) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}/${month}/${day}`
}
</script>

<style lang="scss" scoped>
.distribute-info-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: flex;
  align-items: flex-end;

  .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
  }

  .modal-content {
    position: relative;
    width: 100%;
    height: 80vh;
    max-height: 80vh;
    background: white;
    border-radius: 24rpx 24rpx 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
  }

  @keyframes slideUp {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }

  .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;

    .modal-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }

    .close-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .close-icon {
        font-size: 48rpx;
        color: #999;
      }
    }
  }

  .tabs-container {
    display: flex;
    padding: 24rpx;
    gap: 16rpx;
    background: #f8f9fa;

    .tab-item {
      flex: 1;
      padding: 20rpx;
      background: white;
      border-radius: 12rpx;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      transition: all 0.3s ease;

      &.active {
        background: #1678ff;
        box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);

        .tab-text {
          color: white;
        }

        .tab-icon {
          color: white;
        }
      }

      .tab-icon {
        font-size: 28rpx;
      }

      .tab-text {
        font-size: 26rpx;
        color: #666;
      }
    }
  }

  .modal-body {
    flex: 1;
    padding: 0 24rpx 24rpx;
    height: 0; /* 关键：配合 flex: 1 使用，确保 scroll-view 能正确计算高度 */
    overflow: hidden;
    background: #f8f9fa;
  }

  .records-list {
    .record-item {
      background: white;
      border-radius: 16rpx;
      padding: 24rpx;
      margin-bottom: 16rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
      border: 2rpx solid transparent;
      box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.06);
      background-origin: border-box;
      background-clip: padding-box, border-box;
      position: relative;
      transition: all 0.3s ease;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 16rpx;
        padding: 2rpx;
        background: linear-gradient(135deg, #1678ff 0%, #0d5dd4 100%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
      }

      &:active::before {
        opacity: 1;
      }

      .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        padding-bottom: 16rpx;
        border-bottom: 1rpx solid #f0f0f0;

        .record-company {
          font-size: 32rpx;
          font-weight: 600;
          color: #333;
        }

        .status-badge {
          padding: 8rpx 20rpx;
          border-radius: 8rpx;
          background: #f0f0f0;

          &.viewed {
            background: #e8f5e9;

            .status-text {
              color: #2e7d32;
            }
          }

          .status-text {
            font-size: 24rpx;
            color: #999;
          }
        }
      }

      .record-info {
        .info-row {
          display: flex;
          margin-bottom: 12rpx;

          .info-label {
            font-size: 26rpx;
            color: #999;
            min-width: 140rpx;
          }

          .info-value {
            font-size: 26rpx;
            color: #666;
            flex: 1;
          }
        }
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 80rpx 0;

    .empty-icon {
      font-size: 80rpx;
      display: block;
      margin-bottom: 24rpx;
    }

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }
}
</style>
